<template>
    <!-- 应用于属性组管理页面的特定组件 -->
    <!-- 属性组未关联属性 -->
    <div class="unlinked_attribute">
        <card title="未关联属性">
            <template #actions>
                <el-select class="w-32" v-model="queryAttributeType" clearable>
                    <el-option v-for="(val, key) in attributeTypes" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按属性名查询"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>
            <el-table :data="tableData" @selection-change="handleSelect">
                <el-table-column type="selection" />
                <el-table-column prop="attrName" label="属性名" />
                <el-table-column prop="valueSelect" label="可选值" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="linkAttributes(row.attrId)">关联</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <template #bottom-left>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>

            <template #bottom-right>
                <el-button type="primary" @click="linkAttributes" :disabled="isDeletingButtonDisabled">
                    关联所选
                </el-button>
            </template>
        </card>
    </div>
</template>
<script>
import { getQueryOptions } from '../../mixins';
export default {
    data() {
        return {
            tableData: [],

            selectedId: [],

            queryAttributeType: '',
        };
    },

    props: ['attributeGroupId', 'categoryId', 'categoryName'],

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrGroupNotRelation',
            paginable: true,
            params: {
                categoryId: 'catalogId',
                queryString: 'attrName',
                queryAttributeType: 'attrType',
            },
        }),
    ],

    computed: {
        // 批量删除按钮是否禁用
        isDeletingButtonDisabled() {
            return !this.selectedId.length;
        },

        // 属性类型
        attributeTypes() {
            return {
                1: '基本属性',
                2: '基本销售属性',
                3: '销售属性',
            };
        },
    },

    watch: {
        queryAttributeType: 'query',
    },

    methods: {
        linkAttributes(id) {
            this.$put('/yxl/pms/saveAttrGroupRelation', {
                attrGroupId: this.attributeGroupId,
                attrIds: typeof id === 'number' ? id : this.selectedId.toString(),
            }).then(this.query);
        },

        handleSelect(selectedRows) {
            this.selectedId = selectedRows.map(row => row.attrId);
        },
    },
};
</script>